
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>校验</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>


    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
    <link href="/static/devtools30/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>

    <style>
        .CodeMirror {
            border: 1px solid #eee;
        }
        .wrap {
            padding: 5px;
            background: #f7f7f7;
        }

        .wrap>div {
            width: 49%;
        }

        .layui-table,
        .layui-table-view {
            margin: 0!important;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
            margin-bottom: 10px;
        }

        .layui-form-label {
            width: 50px;
            text-align: left;
            height: 26px;
            line-height: 26px;
            padding: 0;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 26px;
        }

        .width120 .layui-input-inline {
            width: 150px!important;
        }

        .wrap .tjbtn {
            width: 50%;
            right: 0;
            left: 50%;
        }

        .rightform {
            padding: 19px 8px;
            background: #ffffff;
        }

        .textheight {
            height: 100px;
        }

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-left: 0!important;
        }
        /*页面内边距*/

        .addwrap {
            padding: 30px 100px 30px 100px;
        }


        /*下拉框高度*/

        .addwrap .layui-input,
        .layui-select {
            height: 25px;
        }


        /*表单左边文本样式*/

        .addwrap .layui-form-label {
            padding: 0;
            text-align: left;
            height: 26px;
            line-height: 26px;
            width: 50px;
        }


        /*下拉框子项样式*/

        .addwrap .layui-form-select dl {
            top: 26px;
            padding: 0;
        }


        /*下拉框子项内容高度*/

        .addwrap .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }

        .addwrap .layui-input-block {
            min-height: 26px;
            margin-left: 35px;
        }


        /*复选框外边距*/

        .layui-form-item .layui-form-checkbox[lay-skin=primary] {
            margin-top: 0;
            margin-left: 64px;
        }

        .addwrap .layui-input-block {
            margin-left: 0;
        }


        /*多行文本框样式*/

        .layui-textarea {
            min-height: 50px;
        }

        .height26 .layui-form-item {
            height: 26px;
        }


        /*必填红色星号样式*/

        .layui-form-mid {
            line-height: normal!important;
        }
    </style>
</head>
<body>
<div class="flex flex-jusity-betreen wrap">
    <div>
        <div class="backgroundf">
            <table id="mygrid" lay-filter="mygrid"></table>
        </div>

    </div>
    <div class="rightform layui-form" lay-filter="form">


        <div class="layui-form-item height26">
            <label class="layui-form-label">校验名称</label>
            <div class="layui-input-inline marginleft10" style="width:250px">
                <input type="name" name="name" id="name"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item height26">
            <label class="layui-form-label">消息提示</label>
            <div class="layui-input-inline marginleft10" style="width:250px">
                <input type="errorinfo" name="errorinfo" id="errorinfo"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="padding100 flex">
            <div class="">代码</div>
            <div class="colorred marginleft10" id="ckmsg"></div>
        </div>
        <div class="layui-input-block" style="margin-left: 0;font-size: 13px;">
            <textarea name="content" id="content" placeholder="" class="layui-textarea textheight"></textarea>
        </div>

    </div>
</div>
</body>
<script type="text/html" id="toolbardiv">
    <div class="layui-btn-container">
        <button lay-event="selbtn"  class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>

    </div>
</script>

<script>


    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var editor;
    $(function(){
        initGrid();
        initEvent();

    });

    function initEvent(){
        editor = CodeMirror.fromTextArea(document.getElementById("content"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editor.setOption("theme", "eclipse");
        editor.setSize('auto', height-190);



    }


    function selectTable(currentRow){

        editor.setValue(currentRow.content);
        $("#name").val(currentRow.name);
        $("#errorinfo").val(currentRow.errorinfo);
    }

    function initGrid(){
        layui.table.render({
            elem: '#mygrid',
            height: height-20,
            //width: 244,
            size: 'sm', //小尺寸的表格
            url: '/DevtFormListTemplateSqlCheckController/getCheckDemo',
            loading:true,
            where:{search:""},
            page: false, //开启分页
            cols: [
                [ //表头
                    //{field: 'id', title: '分类', width:80, fixed: 'left'}
                    {field: 'name', title: '校验名称',},

                    { field: 'opear', title: '操作',width:"20%", toolbar: '#toolbardiv' }
                ]
            ],
            done:function(){
                dlCommon.layerSelectTable("mygrid");
            }
        });
        dlCommon.layerTableOn("mygrid",function(obj){
            selectTable(obj.data);
        })

        //监听事件
        layui.table.on('tool(mygrid)', function(obj){

            switch(obj.event){
                case 'selbtn':
                    selectTable(obj.data);
                    break;

            };
        });

    }




</script>

</html>
